Summary

• Fix array fields with mode="array" incorrectly re-rendering when a property on any array element is mutated
• This was a regression introduced in v1.27.0 by the React Compiler compatibility changes (Fix react compiler #1893)

Problem

As reported in #1925, starting from v1.27.0, when working with a form.Field that uses mode="array", when any child Field under the array Field is changed, the entire array Field re-renders.

Root Cause

In the React Compiler fix (#1893), a new reactiveStateValue subscription was added:

const reactiveStateValue = useStore(fieldApi.store, (state) => state.value)

This subscribes to the entire state.value. For array fields, when any child property changes, the array reference changes, causing reactiveStateValue to change, which triggers extendedFieldApi recreation and component re-render.

Solution

Make the reactiveStateValue subscription aware of mode:

const reactiveStateValue = useStore(
  fieldApi.store,
  (opts.mode === 'array'
    ? (state) => Object.keys((state.value as unknown) ?? []).length
    : (state) => state.value) as (state: typeof fieldApi.state) => TData | number,
)

For mode="array":

• reactiveStateValue now tracks only the array length
• The state.value getter returns the actual value from fieldApi.state.value
• This ensures re-renders only occur when items are added/removed, not when properties change

Test Plan

• Added test case: should not rerender array field when child field value changes
• All existing tests pass (79 tests in react-form, 403 tests in form-core)

Fixes #1925